<template>
	<view class="coo">
		<view class="bgwhite w94 radius20" style="padding: 20rpx;margin-top: 40rpx;margin-bottom:180rpx ;">
			<view class="flex-between p-14">
				<text class="base-size">所在地区</text>
				<view class="small-size">
					<u-icon name="arrow-right" v-if="isShow" :label="province+'-'+city+'-'+area" label-pos="left"
						color="#6a6a6a" label-color="#6a6a6a" size="24" label-size="24"></u-icon>
					<u-icon name="arrow-right" label="请选择" v-else label-pos="left" color="#6a6a6a" label-color="#6a6a6a"
						size="24" label-size="24" @click="show1=true"></u-icon>
				</view>
			</view>
			<view class="flex-between p-14">
				<text class="base-size">详细地址</text>
				<!-- <text class="small-size">请输入详细地址</text> -->
				<u--input placeholder="请输入详细地址"
					prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx;" border="none"
					v-model="address" inputAlign="right" type='text'>
				</u--input>
			</view>
			<view class="flex-between p-14">
				<text class="base-size">法人信息</text>
				<u--input placeholder="请输入法人姓名"
					prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx;" border="none"
					v-model="name" inputAlign="right" type='text'>
				</u--input>
			</view>
			<view class="flex-between p-14">
				<view>
					<text class="base-size">紧急联系人电话</text>
				</view>
				<u--input placeholder="请输入紧急联系人电话"
					prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx;" border="none"
					v-model="mobile" inputAlign="right" type='text'>
				</u--input>
			</view>
			<view class="flex-between p-14">
				<view>
					<text class="base-size">所属行业</text>
				</view>
				<view class="">
					<u-icon name="arrow-right" label="请选择" v-if="!hy.length" label-pos="left" color="#6a6a6a"
						label-color="#6a6a6a" size="24" label-size="24" @click="show2=true"></u-icon>
					<u-icon name="arrow-right" :label="hy" v-else label-pos="left" color="#6a6a6a" label-color="#6a6a6a"
						size="24" label-size="24" @click="show2=true"></u-icon>
				</view>
			</view>
			<view class="p-14">
				<view>
					<text class="base-size">所处优势</text>
				</view>
				<view class="m20">
					<u--textarea v-model="note" placeholder="给商家留言能提高中选机会" :height="130"></u--textarea>
				</view>
			</view>
			<view class="p-14" style="padding-top: 0;">
				<view>
					<text class="base-size">上传营业执照</text>
				</view>
				<view class="m20 flex-center radius20" style="background-color: #e5e5e5;height: 200rpx;" v-if="!src"
					@click="upload">
					<image src="@/static/login/2.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
				</view>
				<view class="m20 flex-center radius20" style="background-color: #e5e5e5;height: 400rpx;" v-if="src">
					<image :src="src" mode="" style="width: 100%;height: 400rpx;"></image>
				</view>
			</view>
			<view class="p-14">
				<view>
					<text class="base-size">上传门头照片</text>
				</view>
				<view class="m20 flex " v-if="!srcList.length">
					<view class="" v-for="i in 3" :key="i" style="margin: 10rpx;" @click="uploadHeader">
						<image src="@/static/lg.png" mode="" class="radius20"
							style="width: 100rpx;height: 100rpx;background-color: #e5e5e5;"></image>
					</view>
				</view>
				<view class="m20 flex " v-else>
					<view class="" v-for="i in srcList" :key="i" style="margin: 10rpx;">
						<image :src="i" mode="" class="radius20"
							style="width: 100rpx;height: 100rpx;background-color: #e5e5e5;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class=""
			style="width: 100%; position: fixed;bottom: 0;height: 180rpx;background-color: #fff;box-shadow: -10rpx -10rpx 10rpx #cfcfcf;padding: 30rpx;">
			<view class=""
				style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;text-align: center;line-height: 2.5;margin: 0 auto;"
				@click="submit">
				<!-- <u-button  text="大小尺寸"></u-button> -->
				确认提交
			</view>
		</view>

		<u-popup :show="show1" @close="show1=false" mode="bottom" :closeable="true">
			<view style="min-height: 600rpx;padding: 30rpx;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">所属地区</text>
				</view>
				<!-- border-radius: 20px; -->
				<picker-view v-if="show1" indicator-style="background-color: #CEEE5B;opacity: .5;" :value="value"
					@change="bindChange" class="picker-view">
					<picker-view-column>
						<view v-for="ite in adData" :key="ite.name" class="item">{{ite.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="ite in item1.city" :key="ite.name" class="item">{{ite.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="ite in item2.area" :key="ite.name" class="item">{{ite.name}}</view>
					</picker-view-column>
				</picker-view>
				<view class=""
					style="height: 90rpx;border-radius: 90rpx;background-color: #CEEE5B;  text-align: center;line-height: 2.5;"
					@click="show1=false">
					立即上传
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" @close="show2=false" mode="bottom" :closeable="true">
			<view style="min-height: 600rpx;padding: 30rpx 0 ;">
				<view class="flex-column">
					<text style="font-weight: bold;font-size: 36rpx;">所属行业</text>
				</view>
				<view class="u-wrap">
					<view class="u-menu-wrap">
						<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
							:scroll-top="scrollTop">
							<view v-for="(item,index) in tabbar.data" :key="index" class="u-tab-item"
								:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
								@tap.stop="swichMenu(index)">
								<text class="u-line-1">{{item.name}}</text>
							</view>
						</scroll-view>
						<block v-for="(item,index) in tabbar.data" :key="index">
							<scroll-view scroll-y class="right-box" v-if="current==index">
								<view class="page-view" v-for="(item1, index1) in item.child" :key="index1">
									<view>
										{{item1.name}}
									</view>
									<view class="">
										<label>
											<checkbox :value="item1.id" @click="pushId(item1)"
												:checked="isCheck(item1.id)" />
										</label>
									</view>
								</view>
							</scroll-view>
						</block>
					</view>

				</view>
				<view class="" style="padding: 0 30rpx;">
					<view class="uploadBtn" :class="keys ? 'act' : 'uploadBtn'" @click="show2=false">
						立即上传
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getHangye,
		uploadFile,
		uploadFiles,
		cooperate
	} from '@/common/teacherReq';
	import datas from './address.js'
	import classifyData from "@/common/classify.data.js";
	export default {
		data() {
			return {
				tabbar: classifyData,
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				show1: false,
				show2: false,
				adData: [],
				item1: 0,
				item2: 0,
				item3: 0,
				keys: '',
				IdList: [],
				src: '', // http://192.168.110.110:8080/uploads/20250123/c6247eb38c65bd4e5832b05f2e6b0d87.jpg
				srcList: [], // "http://192.168.110.110:8080/uploads/20250123/69e2ba4435228f72e718f30c0a54eefd.jpeg"
				province: '',
				city: '',
				area: '',
				address: '',
				name: '',
				mobile: '',
				note: '',
				hy: ''
			};
		},
		computed: {
			isShow() {
				if (this.province.length && this.city.length && this.area.length) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			submit() {
				let data = {
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.address,
					name: this.name,
					const_mobile: this.mobile,
					content: this.note,
					photo: this.src,
					mentou: this.srcList,
					category_id: this.IdList

				}

				console.log("submit", JSON.stringify(data))
				cooperate(data).then(res => {
					uni.showToast({
						icon: 'success',
						title: '提交成功',
						success() {
							uni.switchTab({
								url: '/pages/user/index'
							})
						}
					});
				})
			},
			bindChange(e) {
				const val = e.detail.value
				// console.log(val, 'valllllll',this.adData[val[0]].name,'---------')
				this.item1 = this.adData[val[0]]
				this.item2 = this.item1.city[val[1]]
				this.province = this.adData[val[0]].name
				this.city = this.item1.city[val[1]].name
				this.area = this.item2.area[val[2]].name
				// console.log(val, 'valllllll', this.adData[val[0]], '---------', this.province, this.city, this.area)
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			use(item) {
				// console.log(item, 'item')
				this.keys = item.name
			},
			pushId(ite) {
				if (this.IdList.includes(ite.id)) {
					this.IdList = this.IdList.filter(item => item !== ite.id)
					// console.log(this.IdList, 'idlist222')
					return
				} else if (this.IdList.length == 1) {
					uni.showToast({
						title: '只能选择一个',
						icon: 'error'
					})
					// console.log(this.IdList, 'idlist111')
					return
				}
				this.IdList.push(ite.id)
				this.hy = ite.name
				// console.log(this.IdList, 'idlist333')
			},
			isCheck(id) {
				if (!id || this.IdList.length == 0) return false
				if (this.IdList.includes(id)) {
					return true
				} else {
					return false
				}
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths);
						this.src = res.tempFilePaths
						uploadFile({
							filePath: res.tempFilePaths[0],
						}).then(resp => {
							this.src = JSON.parse(resp[1].data).data.fullurl
							console.log('resp: ', this.src);
						}).catch(err => {
							uni.showToast({
								icon: 'error',
								title: '上传失败' + err
							})
						})
					}
				})
			},
			uploadHeader() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						// console.log(JSON.stringify(res.tempFilePaths));
						this.srcList = res.tempFilePaths
						uploadFiles({
							filePaths: res.tempFilePaths
						}).then(resp => {
							this.srcList = resp.map(ite => ite.data.fullurl)
							console.log(this.srcList, 'resp---')
						}).catch(err => {
							uni.showToast({
								icon: 'error',
								title: '上传失败' + err
							})
						})
					}
				})
			}
		},
		onLoad() {
			// console.log(datas)
			this.adData = datas
			getHangye({}).then(res => {
				console.log('res: ', res);

				this.tabbar = res
			})

		}
	}
</script>

<style lang="scss" scoped>
	.coo {

		.picker-view {
			width: 100%;
			height: 600rpx;
		}

		.item {
			line-height: 2;
			text-align: center;
		}

		.u-wrap {
			display: flex;
			flex-direction: column;
			height: 50vh;
			position: relative;

			.u-menu-wrap {
				flex: 1;
				display: flex;
				overflow: hidden;

				.u-tab-view {
					height: 100%;
				}

				.u-tab-view {
					width: 200rpx;
					height: 100%;

					.u-tab-item {
						height: 110rpx;
						background: #f6f6f6;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						color: #444;
						font-weight: 400;
						line-height: 1;
					}

					.u-tab-item-active {
						position: relative;
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						background: #fff;
					}

					.u-tab-item-active::before {
						content: "";
						position: absolute;
						border-left: 4px solid $uni-color-primary;
						height: 32rpx;
						left: 0;
						top: 39rpx;
					}
				}
			}
		}

		.right-box {
			background-color: rgb(255, 255, 255);

			.page-view {
				padding: 16rpx;
				height: 90rpx;
				line-height: 2;
				display: flex;
				justify-content: space-between;

				.class-item {
					min-width: 120rpx;
					height: 60rpx;
					border-radius: 60rpx;
					background-color: #e5e5e5;
					text-align: center;
					padding: 0 20rpx;
					border: 2rpx solid transparent;
					line-height: 60rpx;
					font-size: 24rpx;
				}

				& .active {
					background-color: #c9f8b3;
					border: 2rpx solid #8ce82a;
				}

			}
		}

		.uploadBtn {
			height: 90rpx;
			border-radius: 90rpx;
			background-color: #e5e5e5;
			text-align: center;
			line-height: 2.5;
			background-color: #CEEE5B;
		}

		& .act {
			// border: 2rpx solid #8ce82a;
		}
	}
</style>